<div layout="row" flex layout-fill>
  <div layout="row">
    <kylo-side-nav layout="row"></kylo-side-nav>
  </div>
  <div flex layout="column" tabIndex="-1" role="main" layout-fill style="background-color:#F9F9F9;">
    <add-button></add-button>
    <md-toolbar layout="row" class="md-whiteframe-z1 page-header" layout-align="space-between center">
      <div class="md-toolbar-tools">
        <md-button class="menu toggle-side-nav" ng-hide="mc.isSideNavHidden()" ng-click="mc.toggleSideNavList()" aria-label="Show Menu">
          <ng-md-icon icon="menu"></ng-md-icon>
        </md-button>
        <div class="pad-left kylo-text-toolbar" >Kylo</div>
        <ui-router-breadcrumbs displayname-property="data.displayName" template-url="js/common/ui-router-breadcrumbs/uiBreadcrumbs.tpl.html" flex
                               md-truncate></ui-router-breadcrumbs>

        <div ng-show="mc.showSearchBar() && mc.allowSearch" layout="row" layout-fill layout-align="center" flex hide-xs class="global-search-container">
          <ng-md-icon icon="search"></ng-md-icon>
          <md-input-container class="condensed-no-float md-block global-search" md-no-float style="margin-top:8px;margin-bottom:-15px;" flex>
            <input id="search-input" ng-model="mc.searchQuery" ng-keypress="mc.onSearchKeypress($event)" class="global-search-input" placeholder='{{"views.main.search-input" | translate}}'
                   style="color:white">
          </md-input-container>
          <md-button ng-disabled="mc.searchQuery == '' || mc.searchQuery == null" ng-click="mc.search()">{{"views.main.search-btn" | translate}}</md-button>
          <ng-md-icon ng-click="mc.endSearch()" icon="close"></ng-md-icon>
        </div>

        <span flex></span>

        <div layout="row" layout-align="start start">

          <ng-md-icon id="search-bar" style="padding-right:40px" ng-show="mc.showPreSearchBar() && mc.allowSearch" ng-click="mc.initiateSearch()" icon="search"></ng-md-icon>

          <notification-menu></notification-menu>
          <kylo-options class="ng-isolate-scope"></kylo-options>
        </div>
      </div>
    </md-toolbar>

    <md-content flex id="content" md-scroll-y class="{{mc.getStateClassName()}} " scroll>
      <div ui-view="content" class="main-content"></div>
    </md-content>
  </div>
</div>
